<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="50%" :title="drawerTitle">
            <Row>
                <Col>
                    <Card>
                        <Row>
                            <Form ref="form" :model="form" :label-width="70" :rules="formValidate"
                                  style="position:relative">

                                <FormItem label="Hr姓名" prop="userName">
                                    <Input v-model="form.userName" autocomplete="off"/>
                                </FormItem>
                                <FormItem label="联系电话" prop="mobile">
                                    <Input v-model="form.mobile" :disabled="type==1"/>
                                </FormItem>
                                <FormItem label="入职时间" prop="hiredate">
                                    <DatePicker type="date"  @on-change="dataChange"  :value="form.hiredate" format="yyyy-MM-dd"/>
                                </FormItem>

                                <Form-item class="br">
                                    <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:100px">提交
                                    </Button>
                                    <Button @click="handelCancel">取消</Button>
                                </Form-item>
                                <Spin size="large" fix v-if="loading"></Spin>
                            </Form>
                        </Row>
                    </Card>
                </Col>
            </Row>
        </Drawer>
    </div>
</template>
<script>
    import {addHr, editHr, getHr} from "@/api/hr";
    export default {
        name: "hr-drawer",
        components: {
        },
        data() {
            const validateMobile = (rule, value, callback) => {
                var reg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("手机号格式错误"));
                } else {
                    callback();
                }
            };
            return {
                type: 0,
                loading: false, // 表单加载状态
                selectUsers: [],
                drawerTitle: "添加课程",
                drawerVisible: false,
                form: {
                    userName: "",
                    mobile: "",
                    hiredate: ""
                },
                formValidate: {
                    userName: [
                        {required: true, message: "HR名称不能为空", trigger: "blur"}
                    ],
                    mobile: [
                        {required: true, message: "手机号不能为空", trigger: "blur"},
                        {validator: validateMobile, trigger: "blur"}
                    ],
                    hiredate: [
                        {required: false, message: "入职时间不能为空"}
                    ]
                },
                submitLoading: false, // 添加或编辑提交状态
                dataEdit: "", // 编辑数据
                showHTMLModal: false, // 显示html
                full: false, // html全屏开关
                fullscreenModal: false// 显示全屏预览
            };
        },
        methods: {
            init() {

            },
            showDrawer(params) {
                if (params.id) {
                    this.type = 1;
                    this.drawerTitle = "编辑企业";
                    this.form.id = params.id;
                    this.getData();
                } else {
                    this.$refs.form.resetFields();
                    this.drawerTitle = "添加企业";
                    this.type = 0;
                }
                this.drawerVisible = true;
            },

            getData() {
                this.loading = true;
                getHr(this.form.id).then(res => {
                    this.loading = false;

                    if (res.status === true) {
                        this.form = res.data;
                        if (res.data.companyContent == '<p><br></p>') {
                            this.form.companyContent = "";
                        }
                        editor.txt.html(this.form.companyContent);
                        this.$refs.upload.setPicUrl(this.form.compLogo);
                    }
                });
            },
            dataChange(data1,data2){
                this.form.hiredate = data1;
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        if (this.type === 0) {
                            // 添加 避免编辑后传入id等数据 记得删除
                            delete this.form.id;
                            addHr(this.form).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.$parent.getDataList();
                                    this.drawerVisible = false;
                                }
                            });
                        } else if (this.type === 1) {
                            editHr(this.form).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.$parent.getDataList();
                                    this.drawerVisible = false;
                                }
                            });
                        }
                    }
                });
            },
            handelCancel() {
                this.drawerVisible = false;
            },
            handleUpload(v) {
                this.form.compLogo = v.fileUrl;
            }
        },
        mounted() {
            this.init();
        },
        watch: {}
    };
</script>